<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        body{
            background-image:url("../../images/login/forget.jpg");
            background-size:cover;
        }
        #wrapper{
            width: 1250px;
            height: 600px;
            margin: 0 auto;
        }
        #header{
            width: 100%;
            height: 100px;
        }
        #main{
            background-color: rgba(96,96,96,0.3);
            margin-left: 350px;
            margin-top: 50px;
            padding-top: 20px;
            width: 500px;
            height: 300px;
            border-radius: 10px;
            text-align: center;
        }
        #send{
            width: 95px;
            height: 36px;
        }
        #button{
            background-color: dodgerblue;
            border-radius: 5px;
            border: none;
            width: 260px;
            height: 35px;
            color: aliceblue;
        }
        p{display: inline;}
    </style>
</head>
<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="main">
        您好，<p th:text="${username}" id="username"></p><br>
        请输入完整邮箱：<p th:text="${mailname1}"></p><br><br>
        <form action="/usermail.do" method="post" >
            <input type="text" th:value="${username}" name="username" style="display:none">
            <input type="text" th:value="${mailname}" name="mailname" id="mailname" onblur="check()" onclick="onmail()" style="height:30px;width:250px;"><br>
            <span id="email"></span><br>
            <input type="text" placeholder="请输入验证码："style="height:30px;width:150px;" name="varCode" id="varCode" onblur="checkCode()">
            <input type="button" value="获取验证码" onclick="sendMail()" id="send"><br>
            <spen th:text="${error}" id="error"></spen><br>
            <input type="submit" value="下一步" id="button">
        </form>
    </div>
</div>
<script type="text/javascript">
    function checkCode() {
        if($('#varCode').val()==''){
            $('#button').attr("disabled",true);
        }
        else $('#button').attr("disabled",false);
    }
    if($('#varCode').val()==''){
        $('#button').attr("disabled",true);
    }
    $('#send').attr("disabled",true);
    function onmail() {
        $("#email").html("");
    }
    function check() {
        $("#error").text("");
        var username = $("#username").text();
        var mailname = $("#mailname").val();
        $.post("checkMail.do",{username:username}, function (data) {
            if(data.email!=mailname){
                $("#email").html("邮箱不匹配");
            }
            if(mailname==""){
                $("#email").html("请输入邮箱");
            }else if(mailname.indexOf("@qq.com")==-1){
                $("#email").html("请输入正确的邮箱");
            }
            var mailchack = $("#email").text();
            if(mailname!=""&&(mailchack.indexOf("请输入")==-1&&mailchack.indexOf("该邮箱存在")==-1&&mailchack.indexOf("邮箱不匹配")==-1)){
                $('#send').attr("disabled",false);
            } else $('#send').attr("disabled",true);
        })
    }
    function sendMail() {
        var mailname = $("#mailname").val();
        var btn = $("#send");
        var countdown = 60;//设置时间
        var content = "忘记密码验证，您的验证码为（五分钟有效）："
        $.post("sendMail.do", {mailname: mailname,content:content}, function settime() {
            //当时间为0的时候改变button的样式
            if (countdown == 0) {
                btn.attr("disabled", false);
                btn.attr('value',"获取验证码");
                btn.removeClass("disabled");
                countdown = 60;
                return;
            } else {
                btn.addClass("disabled");
                btn.attr("disabled", true);
                btn.attr('value',"重新发送(" + countdown + ")");
                countdown--;
            }
            setTimeout(settime, 1000);//每秒钟执行一次settime函数
        });
    }

</script>
</body>
</html>